import React from 'react';
import { Table, Form, Button, Badge, Card } from 'react-bootstrap';

const TodoList = ({ todos, onToggleComplete, onDeleteTodo, onEditTodo }) => {
  if (!todos.length) {
    return (
      <Card className="text-center p-5 bg-white border-0 shadow-sm rounded-4">
        <Card.Body>
          <i className="bi bi-clipboard-check display-4 text-muted mb-3"></i>
          <Card.Title className="text-muted h4 mb-2">暂无待办事项</Card.Title>
          <Card.Text className="text-muted">点击上方的"添加任务"按钮创建一个新的待办事项</Card.Text>
        </Card.Body>
      </Card>
    );
  }

  return (
    <div className="todo-list-container">
      <div className="todo-list-wrapper">
        <div className="d-flex justify-content-between align-items-center mb-4">
          <h4 className="todo-list-title mb-0 d-flex align-items-center">
            <i className="bi bi-list-check me-2 text-success"></i>
            任务列表
            <Badge bg="success" className="ms-2 px-3 py-2 rounded-pill" style={{ fontSize: '0.9rem' }}>
              {todos.length}
            </Badge>
          </h4>
          <div className="text-muted small">
            <i className="bi bi-info-circle me-1"></i>
            点击任务状态开关可以快速更新任务状态
          </div>
        </div>
        <Card className="todo-list-card border-0 shadow-sm rounded-4">
          <Table hover responsive className="todo-list-table mb-0 align-middle">
            <thead>
              <tr className="bg-light">
                <th className="py-3 px-4" style={{width: "40%", borderTopLeftRadius: '1rem'}}>名称</th>
                <th className="py-3 px-4" style={{width: "20%"}}>分类</th>
                <th className="py-3 px-4" style={{width: "20%"}}>状态</th>
                <th className="py-3 px-4" style={{width: "20%", borderTopRightRadius: '1rem'}}>操作</th>
              </tr>
            </thead>
            <tbody>
              {todos.map((todo) => (
                <tr key={todo.id} className={`todo-list-row ${todo.complete ? 'bg-light' : ''}`} 
                    style={{ transition: 'all 0.2s ease-in-out' }}>
                  <td className="py-3 px-4">
                    <div className="d-flex align-items-center">
                      <i className={`bi ${todo.complete ? 'bi-check-circle-fill text-success' : 'bi-circle'} me-2`} 
                         style={{ fontSize: '1.1rem' }}></i>
                      <span className={todo.complete ? 'text-decoration-line-through text-muted' : 'fw-medium'}>
                        {todo.name || '未命名任务'}
                      </span>
                    </div>
                  </td>
                  <td className="py-3 px-4">
                    <Badge bg={getCategoryColor(todo.category)} pill 
                           className="px-3 py-2" 
                           style={{ 
                             fontSize: '0.85rem',
                             fontWeight: '500',
                             minWidth: '80px',
                             display: 'inline-block'
                           }}>
                      {todo.category || '默认'}
                    </Badge>
                  </td>
                  <td className="py-3 px-4">
                    <Form.Check
                      type="switch"
                      id={`complete-switch-${todo.id}`}
                      checked={todo.complete || false}
                      onChange={() => onToggleComplete(todo.id)}
                      label={
                        <Badge bg={todo.complete ? 'success' : 'warning'} pill
                               className="ms-2 px-3 py-2"
                               style={{ 
                                 fontSize: '0.85rem',
                                 fontWeight: '500',
                                 minWidth: '80px',
                                 display: 'inline-block'
                               }}>
                          {todo.complete ? '已完成' : '进行中'}
                        </Badge>
                      }
                      className="d-flex align-items-center"
                    />
                  </td>
                  <td className="py-3 px-4">
                    <div className="d-flex gap-2">
                      <Button 
                        variant="outline-success" 
                        size="sm"
                        onClick={() => onEditTodo(todo)}
                        className="d-flex align-items-center gap-1 px-3"
                        style={{ 
                          borderWidth: '1.5px',
                          fontWeight: '500',
                          minWidth: '80px',
                          justifyContent: 'center'
                        }}
                      >
                        <i className="bi bi-pencil"></i>
                        编辑
                      </Button>
                      <Button 
                        variant="outline-danger" 
                        size="sm"
                        onClick={() => onDeleteTodo(todo.id)}
                        className="d-flex align-items-center gap-1 px-3"
                        style={{ 
                          borderWidth: '1.5px',
                          fontWeight: '500',
                          minWidth: '80px',
                          justifyContent: 'center'
                        }}
                      >
                        <i className="bi bi-trash"></i>
                        删除
                      </Button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </Card>
      </div>
    </div>
  );
};

// 根据分类名生成不同的颜色
const getCategoryColor = (category) => {
  if (!category) return 'secondary';
  
  const colors = {
    // 工作相关
    '工作': 'primary',
    '会议': 'info',
    '项目': 'primary',
    '报告': 'info',
    '文档': 'primary',
    
    // 学习相关
    '学习': 'info',
    '课程': 'info',
    '考试': 'warning',
    '作业': 'warning',
    '阅读': 'info',
    
    // 生活相关
    '生活': 'success',
    '购物': 'success',
    '饮食': 'success',
    '运动': 'success',
    '健康': 'success',
    
    // 娱乐相关
    '娱乐': 'warning',
    '游戏': 'warning',
    '电影': 'warning',
    '音乐': 'warning',
    '旅行': 'warning',
    
    // 其他分类
    '其他': 'dark',
    '默认': 'secondary',
    '重要': 'danger',
    '紧急': 'danger',
    '待办': 'secondary',
    '计划': 'dark',
    '备忘': 'secondary',
    '提醒': 'warning',
    '约会': 'info',
    '家庭': 'success',
    '社交': 'primary',
    '财务': 'danger',
    '维修': 'warning',
    '清洁': 'success',
    '休息': 'info'
  };
  
  // 如果找不到完全匹配的分类，尝试模糊匹配
  const normalizedCategory = category.toLowerCase().trim();
  for (const [key, value] of Object.entries(colors)) {
    if (normalizedCategory.includes(key.toLowerCase())) {
      return value;
    }
  }
  
  // 如果都没有匹配到，使用默认颜色
  return 'secondary';
};

export default TodoList; 